<script setup lang="ts">
import { defineExpose } from "vue";

interface Props {
  msg?: string;
  num?: number;
  fn?: (val: string) => string;
}
const props = withDefaults(defineProps<Props>(), {
  msg: "hello",
  fn: (val: string) => {
    return val;
  },
});

// 基于选项
// const emit = defineEmits({
//   change: (id: number) => {
//     // 对
//     return id > 10;
//   },
// });

// 基于类型
// const emit = defineEmits<{
//   (e: "update", value: string): void;
// }>();

// 基于类型(简写 vue3.3+)
const emit = defineEmits<{
  change: [num: number];
}>();

function onChange() {
  //   emit("change", "122");
  ljj.value.name = "ljj1";
  emit("change", 22);
}

type Person = {
  name: string;
  age: number;
};

const ljj: Ref<Person> = ref({
  name: "ljj",
  age: 18,
});

const baicia = ref<Person>({
  name: "baicia",
  age: 18,
});

type Person1 = Person & { gender: Ref<string> };
const qingming: Person1 = reactive({
  name: "qingming",
  age: 18,
  gender: ref("男"),
});

defineExpose({
  onChange,
  ljj,
});
</script>

<template>
  <div>
    <button @click="onChange">change</button>
    <div>{{ ljj }}</div>
  </div>
</template>

<style scoped></style>
